<template>
  <div>生命周期钩子函数</div>
  <!-- router.push('/') -->
  <RouterLink to="/">返回首页</RouterLink>
  <div>
    <!-- vue获取页面的元素的方法，给页面元素添加ref属性 -->
    <input ref="input1" type="text" v-model="text" />
  </div>

  <div>
    <input type="text" v-model="num1" />
    <input type="text" v-model="num2" />
    =
    {{ num1 + num2 }}
    <br />
    {{ num3 }}
  </div>
</template>

<script setup>
import { ref, onMounted,onUpdated,computed } from 'vue'
// 获取ref元素，就只需要创建一个变量名称和ref元素的值匹配即可
// 需要注意的就是，值要再onMounted钩子函数之后才会被初始化完成
const input1 = ref(null)
const text=ref('')
const num1=ref(0)
const num2=ref(0)
const num3=computed(()=>{
  return parseInt(num1.value)+parseInt(num2.value)
})

console.log('页面元素', input1.value)
// onMounted钩子函数是页面函数已经被加载完毕才会调用
// 如果需要获取页面元素信息，就必须要在onMounted钩子函数中执行
// 否则就无法获取页面元素
// onMounted钩子函数是离开页面就会被调用
// 反挂载多半是用于销毁大型的js对象
onMounted(() => {
  console.log('页面加载完毕', input1.value)
  input1.value.focus()
})

onMounted(() => {
  console.log('页面卸载完毕')

  onUpdated(() => {
    console.log('页面更新完毕',text.value)
  })
})
</script>

<style scoped></style>
